<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: wanglixin 2429056517@qq.com
 * @LastEditTime: 2024-11-26 16:33:14
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
 <div>
   <div v-if="pageflag" class="user_Overview">
     <ul class="flex">
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums allnum">
           <dv-digital-flop :config="config" style="width: 100%; height: 100%" />
         </div>
         <p>参考摸排户数</p>
       </li>
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums online">
           <dv-digital-flop
               :config="onlineconfig"
               style="width: 100%; height: 100%"
           />
         </div>
         <p>走访户数</p>
       </li>
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums allnum">
           <dv-digital-flop
               :config="offlineconfig"
               style="width: 100%; height: 100%"
           />
         </div>
         <p>申报户数</p>
       </li>
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums online">
           <dv-digital-flop
               :config="laramnumconfig"
               style="width: 100%; height: 100%"
           />
         </div>
         <p>推荐户数</p>
       </li>
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums allnum">
           <dv-digital-flop :config="mock1" style="width: 100%; height: 100%" />
         </div>
         <p>授信户数</p>
       </li>
     </ul>
     <ul class="flex">
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums online">
           <dv-digital-flop :config="mock2" style="width: 100%; height: 100%" />
         </div>
         <p>授信金额(万)</p>
       </li>
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums allnum">
           <dv-digital-flop :config="mock3" style="width: 100%; height: 100%" />
         </div>
         <p>获贷户数</p>
       </li>
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums online">
           <dv-digital-flop :config="mock4" style="width: 100%; height: 100%" />
         </div>
         <p>获贷金额(万)</p>
       </li>
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums online">
           <dv-digital-flop :config="mock5" style="width: 100%; height: 100%" />
         </div>
         <p>覆盖产业链数</p>
       </li>
       <li class="user_Overview-item" style="color: #00c6ff">
         <div class="user_Overview_nums online">
           <dv-digital-flop :config="mock6" style="width: 100%; height: 100%" />
         </div>
         <p>覆盖园区数</p>
       </li>
     </ul>
   </div>
   <Reacquire v-else @onclick="getData" line-height="200px">
     重新获取
   </Reacquire>
 </div>
</template>

<script>
import { currentGET } from "api/modules";
let style = {
  fontSize: 15,
};
export default {
  data() {
    return {
      options: {},
      userOverview: {
        totalNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        alarmNum: 0,
        mock1Num: 0,
        mock2Num: 0,
        mock3Num: 0,
        mock4Num: 0,
        mock5Num: 0,
        mock6Num: 0,
      },
      pageflag: true,
      timer: null,
      config: {
        number: [816286],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#00fdfa",
          fill: "#00C6FF",
        },
      },
      onlineconfig: {
        number: [15906],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#07f7a8",
          fill: "#00C6FF",
        },
      },
      offlineconfig: {
        number: [8637],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#e3b337",
          fill: "#00C6FF",
        },
      },
      laramnumconfig: {
        number: [4069],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#f5023d",
          fill: "#00C6FF",
        },
      },
      mock1: {
        number: [2433],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#f5023d",
          fill: "#00C6FF",
        },
      },
      mock2: {
        number: [1020334],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#f5023d",
          fill: "#00C6FF",
        },
      },
      mock3: {
        number: [2394],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#f5023d",
          fill: "#00C6FF",
        },
      },
      mock4: {
        number: [815232],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#f5023d",
          fill: "#00C6FF",
        },
      },
      mock5: {
        number: [30],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#f5023d",
          fill: "#00C6FF",
        },
      },
      mock6: {
        number: [49],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#f5023d",
          fill: "#00C6FF",
        },
      },
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      const data = {
        "totalNum": 816286,
        "onlineNum": 15906,
        "offlineNum": 8637,
        "alarmNum": 4069,
        "mockNum1": 2433,
        "mockNum2": 1020334,
        "mockNum3": 2394,
        "mockNum4": 815232,
        "mockNum5": 30,
        "mockNum6": 49,
      }
      this.userOverview = data;
      this.config = {
        ...this.config,
        number: [data.totalNum],
      };
      this.onlineconfig = {
        ...this.onlineconfig,
        number: [data.onlineNum],
      };
      this.offlineconfig = {
        ...this.offlineconfig,
        number: [data.offlineNum],
      };
      this.laramnumconfig = {
        ...this.laramnumconfig,
        number: [data.alarmNum],
      };
      this.mock1 = {
        ...this.mock1,
        number: [data.mockNum1],
      };
      this.mock2 = {
        ...this.mock2,
        number: [data.mockNum2],
      };
      this.mock3 = {
        ...this.mock3,
        number: [data.mockNum3],
      };
      this.mock4 = {
        ...this.mock4,
        number: [data.mockNum4],
      };
      this.mock5 = {
        ...this.mock5,
        number: [data.mockNum5],
      };
      this.mock6 = {
        ...this.mock6,
        number: [data.mockNum6],
      };

      this.switper();
    },
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
    },
    //轮询
    switper() {

      // 5s 走访户数
      if (this.timerFirst) {
        return
      }

      let looperFirst = (a) => {

        // 定时器
        let num = Number(this.onlineconfig.number) + this.getRandomInt(1,10)
        this.handleConfig('onlineconfig', num)

      };
      this.timerFirst = setInterval(looperFirst, 5000);
      // this.timerFirst = setInterval(looperFirst, 1000);

      // 10s 更新 申报户数
      if (this.timer1) {
        return
      }
      let looper1 = (a) => {
        // 定时器
        let num = Number(this.offlineconfig.number) + this.getRandomInt(1,3)
        this.handleConfig('offlineconfig', num)
      };
      this.timer1 = setInterval(looper1, 9000);
      // this.timer1 = setInterval(looper1, 1000);

      // 5min 更新 推荐户数
      if (this.timer2) {
        return
      }
      let looper2 = (a) => {
        // 定时器
        let num = Number(this.laramnumconfig.number) + this.getRandomInt(1,2)
        this.handleConfig('laramnumconfig', num)
      };
      this.timer2 = setInterval(looper2, 300000);
      // this.timer2 = setInterval(looper2, 1000);

      // 10min 更新
      if (this.timer3) {
        return
      }
      let looper3 = (a) => {
        // 定时器
        let count1 = ++this.mock1.number
        this.handleConfig('mock1', count1)

        let count2 = Number(this.mock2.number) + this.getRandomInt(50,100)
        this.handleConfig('mock2', count2)

        let count3 = ++this.mock3.number
        this.handleConfig('mock3', count3)

        let count4 = Number(this.mock4.number) + this.getRandomInt(50,100)
        this.handleConfig('mock4', count4)
      };
      this.timer3 = setInterval(looper3, 600000);
      // this.timer3 = setInterval(looper3, 1000);
    },
    handleConfig(e, num){
      this[e] = {
        ...this[e],
        number: [num],
        style: {
          ...this[e].style,
          fontSize: 20, // 数字跳动时设置为28
          fill: "red",
        }
      }
      setTimeout(() => {
        this[e] = {
          ...this[e],
          number: [num],
          style: {
            ...this[e].style,
            fontSize: 18, // 数字跳动时设置为28
            fill: "#00C6FF",
          }
        }
      }, 1000)
    }
  },
};
</script>
<style lang="scss" scoped>
.a{
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.user_Overview {
  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 12px !important;
      margin: 0px auto 5px;
      margin-top: 5px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      // background-image: url("../../assets/img/left_top_lan.png");
      &::before {
        background-image: url("../../assets/img/left_top_lan.png");
        background-size: cover;
      }
    }

    .online {
      &::before {
        background-image: url("../../assets/img/left_top_lv.png");
      }
    }

    .offline {
      &::before {
        background-image: url("../../assets/img/left_top_huang.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("../../assets/img/left_top_hong.png");
      }
    }
  }
}
</style>
